<template>
  <div v-show="isShow">
    <div class="alert">
      <div class="flex">{{msg}}</div>
      <div v-if="type === 'alert'">
        <div class='btnCommon success' @click="close()">确定</div>
      </div>
      <div v-else class='btnGroup'>
        <div class='btnCommon cancel' @click="cancelConfirm()">取消</div>
        <div class='btnCommon success' @click="successConfirm()">确定</div>
      </div>
    </div>
    <div class="mask" @click="closeMask()"></div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'alert'
    },
    msg: {
      type: String,
      default: ''
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close () {
      this.isShow = false
    },
    closeMask () {
      this.close()
    },
    cancelConfirm () {
      this.cancel && this.cancel()
      this.close()
    },
    successConfirm () {
      this.success && this.success()
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped>
$btn-main: #009688;
$btn-dark: darken($btn-main, 10%);
.alert{
  width: 300px;
  height: 150px;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-right: -75px;
  padding:20px 10px;
  box-shadow: 0 5px 8px rgba(0,0,0,0.05);
  background: #fff;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
}
.flex{
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
.btnGroup {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 10px;
  width: 300px;
}
.btnCommon {
  width: 105px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  border-radius: 6px;
  cursor: pointer;
  &.success{
    color: #ffffff;
    background: $btn-main;
    &:hover{
      background: $btn-dark;
    }
  }
  &.cancel{
    color: #fff;
    background: #999;
  }
}
.mask{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0,0,0,0.1);
  z-index: 2000;
  overflow: hidden;
}
</style>
